﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="Keywords" content="" />
    <meta name="description" content="" />
	<title>安全风险管控和隐患治理首页</title>

  <link rel="stylesheet" type="text/css" href="content/default/css/common.css">
  <link rel="stylesheet" type="text/css" href="content/common/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="content/common/swiper/swiper.min.css">
  <link rel="stylesheet" type="text/css" href="content/common/gridster/jquery.gridster.min.css">
  <link rel="stylesheet" type="text/css" href="content/common/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="content/default/css/index1.css">
  <link rel="stylesheet" type="text/css" href="content/default/css/index2.css">
  <link rel="stylesheet" type="text/css" href="content/default/css/safeRiskIndex.css">
  <script type="text/javascript" src="content/common/rem.js"></script>

  </head>
 <body>
    <div class="main">
        <div class="mainTop">
            <div class="clearfix fl">
                <label class="divLabel fl">分类</label>
                <div class="swiperBody1 fl" style="width:5.5rem;">
                    <div class="swiper-container1 swiper-container" style='width:5rem;padding-left: 0.2rem;'>
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <ul class="hidden_nav clearfix">
                                    <li class="active">
                                        <img src="content/default/image/type_icon1.png">
                                        <p>全部</p>
                                    </li>
                                    <li>
                                        <img src="content/default/image/type_icon2.png">
                                        <p>电力版块</p>
                                    </li>
                                    <li>
                                        <img src="content/default/image/type_icon3.png">
                                        <p>煤炭版块</p>
                                    </li>
                                    <li>
                                        <img src="content/default/image/type_icon4.png">
                                        <p>装备制造</p>
                                    </li>
                                    <li>
                                        <img src="content/default/image/type_icon5.png">
                                        <p>工程建设</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-prev swiper-button-prev1"></div>
                    <div class="swiper-button-next swiper-button-next1"></div>
                </div>
            </div>
            <div class="borLine"></div>
            <div class="clearfix fl">
                <label class="divLabel fl" style="padding-right: 0.6rem;" >待办事项</label>
                <div class="swiperBody1 fl" style="width:4rem;height: 0.9rem;">
                    <div class="swiper-container4 swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <ul class="hidden_nav safeNav clearfix ">
                                    <li class="active">
                                        <h3>05</h3>
                                        <p>全部</p>
                                    </li>
                                    <li>
                                        <h3>05</h3>
                                        <p>待监督风险</p>
                                    </li>
                                    <li>
                                        <h3>05</h3>
                                        <p>待验收隐患</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-prev swiper-button-prev4"></div>
                    <div class="swiper-button-next swiper-button-next4"></div>
                </div>
            </div>
            <div class="borLine"></div>
            <div class="clearfix fl">
                <label class="divLabel fl">快捷入口</label>
                <ul class='fastEnter fl'>
                    <li class="active">风险辨识评估</li>
                    <li>风险清单</li>
                    <li >重大风险清单</li>
                    <li>重大危险源</li>
                </ul>
            </div>
            <div class="borLine" style="margin:0.2rem;"></div>
            <a class="setting fl" style="margin:0.35rem 0 0 0.2rem;"></a>
        </div>

        <!--主体内容，垂直整屏切换-->
        <div class="swiper-container swiper-container3 fl">
            <div class="swiper-wrapper">
                <div class="swiper-slide mainCon">
                    <div class="gridster">
                        <ul class="gridsterList clearfix" >
                            <li class="sec1" style="width:12.5rem;">
                                <div class="secTop clearfix">
                                    <ul class='risk-nav1 fl'>
                                        <li class="active">重大危险源分布图</li>
                                        <li>重大危险分布图</li>
                                        <li>重大隐患分布图</li>
                                    </ul>
                                    <ul class="risk-nav2 fr">
                                        <li class="active">全屏显示</li>
                                        <li>重置地图</li>
                                    </ul>
                                </div>
                                <div class="sec1_con" style="overflow: hidden;width:100%;">
                                   <div class='mapDiv' id='map-panel'>
                                   </div>
                                   <div class="safeSortDiv">
                                        <div class="sortTitle">
                                            <h3 class="fl">重大危险源数量排名</h3>
                                            <img src="content/default/image/head/sort_07.jpg" class='sortImg' alt="">
                                        </div>
                                        <ul class="safeSort clearfix">
                                            <li>
                                                <p class="active">1</p>
                                                <p>华电四川发电有限公司</p>
                                                <p>
                                                12
                                                </p>
                                            </li>
                                            <li>
                                                <p class="active">2</p>
                                                <p>华电四川发电有限公司</p>
                                                <p>
                                                1
                                                </p>
                                            </li>
                                            <li>
                                                <p class="active">3</p>
                                                <p>华电四川发电有限公司</p>
                                                <p>
                                                2
                                                </p>
                                            </li>
                                            <li>
                                                <p>4</p>
                                                <p>华电四川发电有限公司</p>
                                                <p>
                                                4
                                                </p>
                                            </li>
                                            <li>
                                                <p>5</p>
                                                <p>华电四川发电有限公司</p>
                                                <p>
                                                5
                                                </p>
                                            </li>
                                            <li>
                                                <p>6</p>
                                                <p>华电四川发电有限公司</p>
                                                <p>
                                                    6
                                                </p>
                                            </li>
                                        </ul>
                                   </div>
                                   
                                    
                                </div>
                            </li>
                            <li class="sec2" style="margin-right: 0;">
                                <div class="secTop clearfix">
                                    <h3 class="fl">风险趋势</h3>
                                    <div class="form_div">
                                        <select name="" id="" style="width:2rem;">
                                            <option value="全部">全部</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="sec4_con" style="position: relative;">
                                    <ul class='echartsNav riskTrendNav' style="top:0.23rem;right:0;" data-id='.riskTrend1' >
                                        <li  class="active">重大风险受控率</li>
                                        <li >重大风险数量</li>
                                    </ul>
                                    <div id='riskTrend' class="riskTrend1"></div>
                                </div>
                            </li>
                            <li class="sec3" style="width:12.5rem;margin-right: 0.15rem;">
                                <div class="secTop clearfix">
                                    <h3 class="fl">隐患趋势</h3>
                                    <div class="form_div">
                                        <select name="" id="">
                                            <option value="全部">全部</option>
                                        </select>
                                        <label for="">年度</label>
                                        <select name="" id="">
                                            <option value="2019">2019</option>
                                            <option value="2018">2018</option>
                                            <option value="2017">2017</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="sec1_con">
                                    <div class="sec3_con dangerTrendDiv" >
                                        <ul class='echartsNav dangerTrendNav' data-id='.dangerTrend1' >
                                            <li  class="active">隐患数量</li>
                                            <li>隐患整改率</li>
                                        </ul>
                                        <div id="dangerTrend" class="dangerTrend1"></div>
                                    </div>
                                   <div class="safeSortDiv">
                                        <div class="sortTitle">
                                            <h3 class="fl">隐患整数量排名</h3>
                                            <img src="content/default/image/head/sort_07.jpg" class='sortImg' alt="">
                                        </div> 
                                        <ul class="safeSort clearfix">
                                            <li>
                                                <p class="active">1</p>
                                                <p>华电四川发电有限公司</p>
                                                <p>
                                                12
                                                </p>
                                            </li>
                                            <li>
                                                <p class="active">2</p>
                                                <p>华电四川发电有限公司</p>
                                                <p>
                                                1
                                                </p>
                                            </li>
                                            <li>
                                                <p class="active">3</p>
                                                <p>华电四川发电有限公司</p>
                                                <p>
                                                2
                                                </p>
                                            </li>
                                            <li>
                                                <p>4</p>
                                                <p>华电四川发电有限公司</p>
                                                <p>
                                                4
                                                </p>
                                            </li>
                                            <li>
                                                <p>5</p>
                                                <p>华电四川发电有限公司</p>
                                                <p>
                                                5
                                                </p>
                                            </li>
                                            <li>
                                                <p>6</p>
                                                <p>华电四川发电有限公司</p>
                                                <p>
                                                    6
                                                </p>
                                            </li>
                                        </ul>
                                   </div>
                                </div>
                            </li>
                            <li class="sec4" style="margin-right: 0;">
                                <div class="secTop clearfix">
                                    <h3 class="fl">安全检查类别</h3>
                                    <div class="form_div">
                                        <select name="" id="">
                                            <option value="全部">全部</option>
                                        </select>
                                        <label for="">年度</label>
                                        <select name="" id="">
                                            <option value="2019">2019</option>
                                            <option value="2018">2018</option>
                                            <option value="2017">2017</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="sec4_con safeCheckTypeDiv" >
                                    <div class='safeCheckType' style="height:2.6rem;"></div>
                                    <ul class="setUl" >
                                        <li>
                                            <i style="background: #5181ff;"></i>
                                            <p>日检查</p>
                                            <span>80%</span>
                                            <p>400</p>
                                        </li>
                                        <li>
                                            <i style="background: #958bff;"></i>
                                            <p>周检查</p>
                                            <span>15%</span>
                                            <p>75</p>
                                        </li>
                                        <li>
                                            <i style="background: #ff688d;"></i>
                                            <p>月度检查</p>
                                            <span>5%</span>
                                            <p>25<p>
                                        </li>
                                        <li>
                                            <i style="background: #ff9c00;"></i>
                                            <p>季度检查</p>
                                            <span>5%</span>
                                            <p>25<p>
                                        </li>
                                        <li>
                                            <i style="background: #fed100;"></i>
                                            <p>年度检查</p>
                                            <span>15%</span>
                                            <p>75</p>
                                        </li>
                                        <li>
                                            <i style="background: #00dace;"></i>
                                            <p>专项检查</p>
                                            <span>5%</span>
                                            <p>25<p>
                                        </li>
                                        <li>
                                            <i style="background: #51b3ff;"></i>
                                            <p>其他检查</p>
                                            <span>5%</span>
                                            <p>25<p>
                                        </li>
                                    </ul>
                                  
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
   <script type="text/javascript" src="content/common/jquery-3.3.1.min.js"></script>
   <script type="text/javascript" src="content/common/swiper/swiper.jquery.min.js"></script>
   <script type="text/javascript" src="content/default/js/index1.js"></script>
   <script type="text/javascript" src="content/common/gridster/jquery.gridster.min.js"></script>
   <script type="text/javascript" src="content/common/layui/layui.all.js"></script>
   <script src="content/common/echarts.min.js"></script>
   <script src="content/default/js/riskTrend.js"></script>
   <script src="content/default/js/dangerTrend.js"></script>
   <script src="content/default/js/safeCheckType.js"></script>
  <script src="content/default/js/mapChart.js"></script>
   <script>
       var mySwiper1 = new Swiper ('.swiper-container4', {
        loop: true,
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next4',
        prevButton: '.swiper-button-prev4'
    })
       function SafetyIndicators(){
        layer.open({
          type: 2,
          title: '安全指标设置',
          shadeClose: true,
          shade: false,
          maxmin: false, //开启最大化最小化按钮
          area: ['900px', '500px'],
          content: 'SafetyIndicators.html'
        });
     }
   </script>
 </body>
</html>